<template>
  <div class="cardtop" ref="nihao">
    <div class="video" v-if="!autoPlay" @click="playvideo">
      <img :src="item.children[0].model.resource.cover" alt="" />
      <div class="upvideo">
        <span
          >{{
            item.children[0].model.resource.count.count_comment | count
          }}
          评论</span
        >|
        <span
          >{{
            item.children[0].model.resource.count.count_view | count
          }}观看</span
        >|
        <span>{{ item.children[0].model.resource.duration | delaytime }}</span>
      </div>
        
    </div>
    <div class="videobox" v-if="autoPlay" @click="playvideo">
      <video
        muted="muted"
        :src="vurl"
        class="video"
        autoplay
        ref="video"
      ></video>
      <div class="mute" v-if="autoPlay" @click="mutecontrol">
        <i v-if="mute" class="iconfont icon-shengyinjingyin"></i>
        <i v-else class="iconfont icon-shengyinkai"></i>
      </div>
    </div>
    <div class="foot">
      <div class="footright" @click="onClick">
        <p class="title">{{ item.children[0].model.resource.title }}</p>
        <div class="footrightbottom">
          <img
            :src="item.children[0].model.resource.author.userinfo.avatar"
            alt=""
          />
          <span class="username">{{
            item.children[0].model.resource.author.userinfo.username
          }}</span>
          <p
            class="peopcount"
            v-if="item.children[0].model.resource.team_user_count"
          >
            和其他
            <span class="peopcoures">{{
              item.children[0].model.resource.team_user_count
            }}</span
            >人
            <span class="guanzhu">关注</span>
          </p>
        </div>
      </div>
      <div class="footleft">
        <span
          ><i class="iconfont icon-shoucang"></i
          >{{ item.children[0].model.resource.count.count_collect }}</span
        >
        <span
          ><i class="iconfont icon-31dianzan"></i
          >{{ item.children[0].model.resource.count.count_like }}</span
        >
        <span><i class="iconfont icon-androidgengduo"></i></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    play: String,
  },
  data() {
    return {
      vurl: null,
      autoPlay: false,
      timer: null,
      viewHeight: null,
      mute: true,
    };
  },
  created: function () {
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/article/" +
          this.item.children[0].model.resource.id
      )
      .then((res) => {
        var k = res.data.data.video.content.progressive;
        this.vurl = k[k.length - 1].url;
      });
    this.viewHeight = window.innerHeight;
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollx);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollx);
  },
  methods: {
    handleScrollx() {
      this.$nextTick(() => {
        if (this.$refs.nihao) {
          this.$nextTick(() => {
            if (this.timer) {
              clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
              var top = this.$refs.nihao.getBoundingClientRect().top;
              if (top >= 0 && top < this.viewHeight / 2 - 100) {
                this.autoPlay = true;
              } else {
                this.autoPlay = false;
              }
            }, 1000);
          });
        }
      });
    },
    mutecontrol() {
      this.mute = !this.mute;
      if (this.mute) {
        this.$refs.video.muted = "muted";
      } else {
        this.$refs.video.muted = "";
      }
    },
    onClick() {
      console.log(
        this.item.resource
          ? this.item.resource.id
          : this.item.children[0].model.resource.id
      );
      if (
        this.item.resource
          ? this.item.resource.author.userinfo.is_vmovier_migrate_user
          : this.item.children[0].model.resource.author.userinfo
              .is_vmovier_migrate_user
      ) {
        this.playvideo();
      } else {
        var id = this.item.resource
          ? this.item.resource.author.userinfo.id
          : this.item.children[0].model.resource.author.userinfo.id;
        this.$router.push({ path: "/userpage", query: { id: id } });
      }
    },
    playvideo() {
      if (this.item.children) {
        this.$router.push({ path: "/playvideoview",query:{id:(this.item.resource?this.item.resource.id:this.item.children[0].model.resource.id)} });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cardtop {
  width: 100%;
  min-height: 330px;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  position: relative;
  .title {
    font-size: 15px;
    color: #000;
    font-weight: 600;
    margin: 10px 5px;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }

  .mute {
    position: absolute;
    left: 26px;
    bottom: 120px;
    i {
      color: white;
      font-size: 30px;
    }
  }
  .videobox {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #000;
    .video {
      width: 100%;
      height: 100%;
      position: relative;
      filter: blur(0px) brightness(0.9);
      .upvideo {
        color: #ddd;
        font-size: 14px;
        position: absolute;
        right: 10px;
        bottom: 15px;
      }
    }
    .mute {
      position: absolute;
      left: 20px;
      bottom: 15px;
      i {
        color: white;
        font-size: 30px;
      }
    }
  }
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7c7c7c;
    margin-top: 10px;
    font-size: 14px;
    .footright {
      width: 70%;
      .footrightbottom {
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-left: 5px;
        }
        display: flex;
        align-content: space-between;
        align-items: center;
        .username {
          display: inline-block;
          margin: 0 5px;
          max-width: 50px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .peopcount {
          color: #aaa;
          .guanzhu {
            color: red;
            font-weight: 600;
            margin-left: 10px;
          }
          .peopcoures {
            color: #000;
            font-weight: 600px;
          }
        }
      }
    }
    .footleft {
      display: flex;
      width: 30%;
      justify-content: space-between;
      span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      i {
        font-size: 24px;
        font-weight: 600;
        color: #666;
      }
    }
  }
}
</style>